<template>
  <ContentWrap>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="handleAddItem" class="mb-4">
      <Icon icon="ep:plus" class="mr-5px" /> 添加
    </el-button>

    <!-- 表格 -->
    <el-table :data="itemList" v-loading="loading">
      <el-table-column label="单品名称" prop="title" />
      <el-table-column label="单品库存" prop="stock" align="center" />
      <el-table-column label="单品消耗" prop="useStock" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEditItem(scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDeleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加/修改 表单弹窗 -->
    <SingleItemForm ref="formRef" @success="handleFormSuccess" />

  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import SingleItemForm from './SingleItemForm.vue' // 导入表单组件
import * as SingleItemApi from '@/api/localLife/singleItem' // 导入 API
import { useI18n } from 'vue-i18n'
import { useMessage } from '@/hooks/web/useMessage' // Correct import path

const message = useMessage() // 消息弹窗 - Use the globally provided composable
const { t } = useI18n() // 国际化

const loading = ref(false) // 控制表格加载状态
const total = ref(0) // 总条数

// 定义列表项接口，匹配 API 返回
interface ListItem extends SingleItemApi.SingleItemRespVO {}
const itemList = ref<ListItem[]>([]) // 表格数据
const formRef = ref() // 表单组件 Ref

// 定义查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  // TODO: 如果需要搜索，在这里添加其他查询参数
})

// 获取列表数据
const getList = async () => {
  loading.value = true;
  try {
    const data = await SingleItemApi.getSingleItemPage(queryParams);
    // TODO: 确认 data 结构，假设为 { list: [], total: 0 }
    itemList.value = data.list || [];
    total.value = data.total || 0;
  } finally {
    loading.value = false;
  }
}

// 初始化加载数据
onMounted(() => {
  getList();
});

// 添加按钮点击
const handleAddItem = () => {
  formRef.value?.open('create'); // 调用表单组件的 open 方法
}

// 编辑按钮点击
const handleEditItem = (item: ListItem) => {
  formRef.value?.open('update', item.id); // 调用表单组件的 open 方法
}

// 删除按钮点击
const handleDeleteItem = (item: ListItem) => {
  message.delConfirm('确认删除单品 "' + item.title + '"?').then(async () => {
    try {
      await SingleItemApi.deleteSingleItem(item.id);
      message.success(t('common.delSuccess'));
      await getList(); // 删除成功后刷新列表
    } catch (error) {
      console.error('删除失败:', error);
      // 可以根据实际情况添加更具体的错误提示
      message.error('删除失败');
    }
  }).catch(() => {}); // 用户取消删除
}

// 库存按钮点击 (待实现)
const handleStock = (item: ListItem) => {
  console.log('Stock clicked:', item);
  message.info('库存管理功能待实现');
  // TODO: 打开库存管理弹窗或跳转到库存页面
}

// 表单操作成功后的回调
const handleFormSuccess = () => {
  getList() // 刷新列表
}

</script>
